<template>
  <div class="about-container">
    <m-header title="关于我们"></m-header>
    <div class="about-content">
      <img class="about-img" src="../../../assets/imgs/mine/logo.png" alt="">
      <a :href="versionData.apk_url" v-if="versionData.is_update">
        <span class="new version">{{versionData.content}}</span>
      </a>
      <div class="version" v-else>当前版本：V1.0.0</div>
    </div>
  </div>
</template>
<script>
import { mapActions } from 'vuex';

export default {
  name: 'About',
  data () {
    return {
      versionData: {
        // is_update: 1, // 有新版本
        // is_required: '1',
        // content: '新版本：v1.0.20190306',
        // apk_url: 'https://www.try255.com/demo.apk',
        // version: '1.0.20190306'
        // apk_url: '', // 无新版本
        // content: '已经是最新版本',
        // is_required: 0,
        // is_update: 0
      }
    };
  },
  mounted () {
    this.getAppVersion();
  },
  methods: {
    ...mapActions({
      getVersion: 'mine/getVersion'
    }),
    getAppVersion () {
      const u = navigator.userAgent;
      const isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1;
      const isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
      const system = isIOS ? 'ios' : 'android';
      const params = {
        version: '1.0.0',
        system
      }
      this.getVersion(params).then(res => {
        this.versionData = res;
      });
    }
  }
};
</script>
<style lang="less">
  .about-container {
    padding-top: 1.92rem;
    padding-bottom: 0.2rem;
    background: #f7f7f7;
    .about-content {
      text-align: center;
      .about-img {
        display: block;
        width: 1.44rem;
        height: 1.44rem;
        margin: 0 auto;
      }
      .version {
        display: inline-block;
        margin-top: 0.32rem;
        line-height: 0.48rem;
        font-size: 0.32rem;
        color: #1c1c1c;
        &.new {
          color: blue;
        }
      }
    }
  }
</style>
